<template>
    <view class="box">
        <!-- title -->
        <view class="u-m-b-20 u-flex u-row-between">
            <view class="u-flex">
                <view v-if="baseData.line" class="uni-line u-m-r-20"></view>
                <text class="u-font-32 font-bold">{{baseData.title}}</text>
            </view>
            <u-button v-if="baseData.rightText" class="uni-look-btn" 
                type="warning" :plain="true" shape="circle" text="" @tap="rightBtnClick">
                <text class="u-font-24">{{baseData.rightText}}</text>
            </u-button>
        </view>

        <!-- item -->
        <view v-if="item.show" v-for="(item,index) in baseData.list" :key="index" 
            class="u-flex u-row-between u-p-t-20 u-p-b-20 item">
            <!-- 标题 -->
            <view class="u-font-28">
                <text v-if="item.required" style="color:red">*</text>
                <text class="uni-gery-color">{{item.title}}</text>
            </view>
            <view class="u-font-28 u-flex" style="max-width:90%">
                <!-- 普通文本 -->
                <text v-if="item.type!='phone'&&item.type!='select'&&item.type!='input'&&item.type!='date'" 
                    class="u-text-right">{{item.value?item.value:'暂无数据'}}
                </text>
                <!--下拉选择 -->
                <view v-if="item.type=='select'||item.type=='date'" class="u-flex u-font-28" 
                    @tap.stop="showSelect(item.type,item.field,item.disabled,index)">
                    <text class="u-m-r-10" v-if="item.value">{{item.value}}</text>
                    <text v-else class="u-m-r-10 uni-gery-color">{{item.pla}}</text>
                    <u-icon name="arrow-down" size="14"></u-icon>
                </view>
                <!-- 输入框 -->
                <u--input v-if="item.type=='input'"
                    fontSize="28rpx" :disabled="item.disabled" disabledColor="#fff"
                    v-model="item.value" :placeholder="item.pla" placeholderClass="uni-placeholder" 
                    border="none" inputAlign="right" clearable @focus="focus(item.field)" @change="inputChange">
                </u--input>
                <!-- 电话 -->
                <!-- <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="14" /> -->
                <!-- 查看 -->
                <!-- <u--text v-if="item.type=='look'" class="u-m-l-30" text="查看" type="warning" size="14" @tap.stop="lookClick"></u--text> -->
                <!-- 银行卡识别 -->
                <!-- <u-icon v-if="item.field=='gzkkh'&&!item.disabled" class="u-m-l-16" name="camera-fill" size="20" @tap="camera"></u-icon> -->
            </view>
        </view>

        <!-- 下拉选择 -->
        <!-- <u-picker :show="show" :columns="datas" keyName="label" :closeOnClickOverlay="true"
            @cancel="show=false" @close="show=false" @confirm="confirmSelect">
        </u-picker> -->

        <!-- 时间选择器 -->
        <!-- <u-datetime-picker
            :show="showDate" mode="date" v-model="date" :formatter="formatter"
            @cancel="showDate=false" @close="showDate=false" :closeOnClickOverlay="true" @confirm="confirmDate"
        ></u-datetime-picker> -->
    </view>
</template>


<script>
export default {
    name: 'baseInfoPlus',
    props:{
        baseData:{
            type: Object,
            default(){
                return {
                    type: 'info',
                    line: true,
                    title: '基础信息',
                    rightText: '',
                    list:[
                        { title:'单位名称', value:'新疆塔建三五九建工有限责任公司' },
                        { title:'统一信用代码', value:'91659002MA77X84A58' },
                        { title:'证件类型', value:'暂无数据' },
                        { title:'单位地址', value:'新疆阿拉尔市滨海大道东1395好' },
                        { title:'手机号码', value:'15334527675', type:'phone' },
                        { title:'单位类型', value:'施工单位' },
                    ]
                }
            }
        }
    },

    data(){
        return{
            show: false, // 下拉选择器
            datas:[],
            showDate: false, // 时间选择器
            date: this.$moment(new Date()).format('YYYY-MM-DD'), // 默认时间
            selectDateField: '', // 操作的时间picker
            inputField: '', // 操作的输入框
        }
    },

    methods: {
        // 自定义格式化规则
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            return value
        },
        // 右上角查看
        rightBtnClick(){
            this.$emit('rightTopClick')
        },
        // 查看
        lookClick(){},


        // 下拉选择&&时间选择
        showSelect(type,field,disabled,index){
            if( type == 'date' ){ // 时间选择
                if( field == 'gzzfrq' ){ // 工资支付日期(只选择具体的某一天)
                    const arr = []
                    for(let i=1; i<31; i++ ){
                        arr.push({
                            type: this.baseData.type,
                            field: 'gzzfrq',
                            label: i,
                            value: i
                        })
                    }
                    this.datas.splice(0,1,arr)
                    this.show = true
                }else{
                    this.selectDateField = field
                    this.showDate = true
                }
            }else{ // 下拉选择
                if( !disabled ){ 
                    this.datas.splice(0,1,this.baseData.list[index].data)
                    this.show = true
                }
            }
        },
        // 下拉选择确认
        confirmSelect(e){
            this.$emit('confirmSelect',this.datas[0][e.indexs[0]])
            this.show = false
            this.inputField = ''
        },
        // 时间选择确认
        confirmDate(e){
            e['type'] = this.baseData.type
            e['field'] = this.selectDateField
            this.$emit('confirmDate',e)
            this.showDate = false
        },

        // 输入框聚焦
        focus(field){
            this.inputField = field
        },
        // 输入框改变事件
        inputChange(e){
            this.$emit('inputChange',{ type:this.baseData.type, field:this.inputField, value:e })
        },


        // 银行卡识别
        camera(){
            this.$emit('camera')
        }
    },
}
</script>


<style scoped lang="scss">
    .box{
        .item{
            border-bottom: 1rpx solid #eee;
            /deep/.u-input{
                padding: 0 !important;
            }
        }
    }
</style>